<template>
  <div class="coupons-page">
    <!-- 顶部标签栏 -->
    <div class="tabs-container">
      <div class="tab-item" 
           :class="{ 'active': activeTab === 'pending' }"
           @click="switchTab('pending')">
        待使用
      </div>
      <div class="tab-item" 
           :class="{ 'active': activeTab === 'used' }"
           @click="switchTab('used')">
        已使用
      </div>
      <div class="tab-item" 
           :class="{ 'active': activeTab === 'expired' }"
           @click="switchTab('expired')">
        已过期
      </div>
    </div>

    <!-- 优惠券列表外层容器 -->
    <div class="coupons-outer-container">
      <!-- 优惠券内容区域 -->
      <div class="coupons-content">
        <!-- 有优惠券时显示列表 -->
        <div v-if="currentCoupons.length > 0" class="coupons-list">
          <div 
            v-for="(coupon, index) in currentCoupons" 
            :key="coupon.id" 
            class="coupon-card"
            :class="coupon.status"
          >
            <!-- 优惠券背景 -->
            <div class="coupon-bg1">
              <!-- 优惠券内容 -->
              <div class="coupon-content">
                <!-- 顶部文字：动态绑定加油站名称 -->
                <div class="coupon-top-text">仅限于{{ coupon.station }}使用</div>
                
                <!-- 中间内容：Flex布局确保金额靠右 -->
                <div class="coupon-main">
                  <div class="coupon-condition">{{ coupon.condition }}</div>
                  <!-- 动态绑定金额数据 -->
                  <div class="coupon-value">¥{{ coupon.value }}</div>
                </div>

                <!-- 新增的虚线 -->
                <div class="dashed-line"></div>
                
                <!-- 底部信息：确保时间正常显示 -->
                <div class="coupon-bottom">
                  <div class="coupon-validity">有效期至: {{ coupon.startDate }}—{{ coupon.endDate }}</div>
                  <div class="coupon-status-text">{{ getStatusText(coupon.status) }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 无优惠券时显示空状态：修复v-else位置，与v-if同级 -->
        <div v-else class="empty-state">
          <div class="empty-text">暂无{{ getTabText() }}优惠券</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyCouponsPage',
  data() {
    return {
      activeTab: 'pending', // 当前选中的标签
      coupons: {
        pending: [
          {
            id: 1,
            condition: '满200元可用',
            value: 20,
            startDate: '2020.04.11',
            endDate: '2023.05.11',
            status: 'pending',
            station: 'XX加油站'
          },
          {
            id: 2,
            condition: '满200元可用',
            value: 20,
            startDate: '2020.04.11',
            endDate: '2023.05.11',
            status: 'pending',
            station: 'XX加油站'
          },
          {
            id: 3,
            condition: '满200元可用',
            value: 20,
            startDate: '2020.04.11',
            endDate: '2023.05.11',
            status: 'pending',
            station: 'XX加油站'
          }
        ],
        used: [
          {
            id: 4,
            condition: '满200元可用',
            value: 20,
            startDate: '2020.04.11',
            endDate: '2023.05.11',
            status: 'used',
            station: 'XX加油站'
          }
        ],
        expired: [
          {
            id: 5,
            condition: '满200元可用',
            value: 20,
            startDate: '2020.04.11',
            endDate: '2023.05.11',
            status: 'expired',
            station: 'XX加油站'
          }
        ]
      }
    }
  },
  computed: {
    // 当前标签对应的优惠券列表
    currentCoupons() {
      return this.coupons[this.activeTab] || [];
    }
  },
  methods: {
    // 切换标签
    switchTab(tab) {
      this.activeTab = tab;
    },

    // 获取状态文字
    getStatusText(status) {
      const statusMap = {
        pending: '待使用',
        used: '已使用',
        expired: '已过期'
      };
      return statusMap[status] || '';
    },

    // 获取标签文字
    getTabText() {
      const tabMap = {
        pending: '待使用',
        used: '已使用',
        expired: '已过期'
      };
      return tabMap[this.activeTab] || '';
    }
  },
  
  onLoad(options) {
    console.log('优惠券页面加载参数：', options);
  }
}
</script>

<style scoped>
/* 页面全局样式 */
.coupons-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 标签栏样式 */
.tabs-container {
  display: flex;
  background-color: #ffffff;
  padding: 0;
  border-bottom: 1px solid #eee;
}

.tab-item {
  flex: 1;
  padding: 24rpx 32rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  color: #666666;
  position: relative;
}

.tab-item.active {
  color: #007AFF;
  font-weight: 600;
}

/* 选中标签下划线 */
.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 60%;
  height: 4rpx;
  background-color: #007AFF;
  border-radius: 2rpx;
}

/* 优惠券外层容器 */
.coupons-outer-container {
  padding: 10rpx;
  width: 90%;
  background-color: #fff;
  border-radius: 12rpx;
  margin: 20rpx;
}

/* 优惠券内容区域 */
.coupons-content {
  padding: 40rpx 32rpx;
  min-height: calc(100vh - 120rpx);
}

/* 优惠券列表 */
.coupons-list {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

/* 优惠券卡片：增加高度确保内容显示 */
.coupon-card {
  position: relative;
  min-height: 220rpx;
  width: 100%;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.coupon-bg1 {
  position: relative;
  background-size: cover;
  background-position: center;
  height: 85%;
  
   background-size: contain; /* 或 cover，根据需求调整 */
    width: 94%; /* 让背景图宽度跟随父容器（卡片） */
  
  border-radius: 12rpx;
  padding: 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 不同状态背景图 */
.coupon-card.pending .coupon-bg1 {
  background-image: url('@/static/mycoupons-img/优惠券待使用.png');
}

.coupon-card.used .coupon-bg1 {
  background-image: url('@/static/mycoupons-img/优惠券已使用.png');
}

.coupon-card.expired .coupon-bg1 {
  background-image: url('@/static/mycoupons-img/优惠券已过期.png');
}

/* 优惠券内容：提高层级避免遮挡 */
.coupon-content {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 顶部文字 */
.coupon-top-text {
  font-size: 24rpx;
  color: rgba(255,255,255,0.9);
  margin-bottom: 12rpx;
}

/* 中间内容：左右布局 */
.coupon-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.coupon-condition {
  font-size: 32rpx;
  font-weight: 600;
  color: #ffffff;
}

.coupon-value {
  font-size: 48rpx;
  font-weight: bold;
  color: #ffffff;
  line-height: 1.2;
}

/* 新增的虚线样式 */
.dashed-line {
	margin-top: 12rpx;
	margin-bottom: 10rpx;
  height: 2rpx;
  background: linear-gradient(to right, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.5) 50%, transparent 50%, transparent 100%);
  background-size: 16rpx 2rpx;
}

/* 底部信息 */
.coupon-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.coupon-validity {
  font-size: 24rpx;
  color: rgba(255,255,255,0.9);
}

.coupon-status-text {
  font-size: 24rpx;
  color: rgba(255,255,255,0.9);
  padding: 4rpx 16rpx;
  border-radius: 16rpx;
  background-color: rgba(0,0,0,0.1);
}

/* 空状态 */
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 600rpx;
}

.empty-text {
  font-size: 32rpx;
  color: #999999;
  text-align: center;
}

/* 响应式适配 */
@media (max-width: 375px) {
  .coupons-content {
    padding: 32rpx 24rpx;
  }
  
  .coupon-card {
    height: 180rpx;
  }
  
  .coupon-bg1 {
    padding: 20rpx;
  }
  
  .coupon-condition {
    font-size: 28rpx;
  }
  
  .coupon-value {
    font-size: 42rpx;
  }
}

@media (min-width: 414px) {
  .coupon-card {
    height: 240rpx;
  }
  
/*  .coupon-bg1 {
    padding: 28rpx;
  } */
  
  .coupon-condition {
    font-size: 34rpx;
  }
  
  .coupon-value {
    font-size: 52rpx;
  }
}
</style>